<template>
    <div class="app-container">
        <div class="container">
            <div class="main page page-list">
                <div class="head-container">
                    <el-card shadow="never">
                        <div class="search-bar pd">
                            <el-form :inline="true" :model="searchModel" size="mini" class="demo-form-inline">

                                <el-form-item label="日期">
                                    <el-date-picker v-model="searchModel.day" type="date" value-format='yyyy-MM-dd' placeholder="日期">
                                    </el-date-picker>
                                </el-form-item>

                                <el-form-item label="接口路径">
                                    <el-input size="mini" v-model="searchModel.api" placeholder="接口路径"></el-input>
                                </el-form-item>

                                <el-form-item>
                                    <el-button type="primary" @click="search">查询</el-button>
                                    <el-button type="default" @click="reset">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-card>

                </div>

                <div class="data-list-wrap">
                    <el-card shadow="never">
                        <el-table v-loading="loading" :data="list" size="mini" style="width: 100%">
                            <el-table-column prop="day" label="日期" />
                            <el-table-column prop="apiName" label="接口名称" />

                            <el-table-column prop="api" label="接口路径" />

                            <el-table-column prop="reqCount" label="请求总数" />

                            <el-table-column label="每小时的请求数">
                                <template slot-scope="scope">
                                    <div>最大值：<span>{{ scope.row.hourMaxReqCount ? scope.row.hourMaxReqCount : "-" }}</span>
                                    </div>
                                    <div>最小值：<span>{{ scope.row.hourMinReqCount }}</span></div>
                                    <div>平均值：<span>{{ scope.row.hourAvgReqCount }}</span></div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="errReqCount" label="异常数" />


                            <el-table-column label="成功率">
                                <template slot-scope="scope">
                                    <div>
                                        {{ scope.row.successRate }}%
                                    </div>
                                </template>
                            </el-table-column>


                            <el-table-column label="耗时（毫秒）">
                                <template slot-scope="scope">
                                    <div>最大值：<span>{{ scope.row.maxReqCostTime ? scope.row.maxReqCostTime : "-" }}</span>
                                    </div>
                                    <div>最小值：<span>{{ scope.row.minReqCostTime }}</span></div>
                                    <div>平均值：<span>{{ scope.row.avgReqCostTime }}</span></div>
                                </template>
                            </el-table-column>




                        </el-table>
                        <div class="paging-wrap">
                            <el-pagination :current-page="searchModel.pageNo" :page-sizes="[10, 20, 50, 100]"
                                :page-size="searchModel.pagesize" :total="searchModel.count"
                                layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                                @current-change="handleCurrentChange" />
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import { aggSearchApiMonitor } from "@/api/business";
const defaultModel = {
    pageNo: 1,
    day: "",
    pageSize: 10,
    count: 0,
};
export default {
    data() {
        return {
            searchModel: _.cloneDeep(defaultModel),
            list: [],
            loading: false,
        };
    },
    created() {
        // 初始化数据
        this.getList(1);
    },
    methods: {

        // 修改分页
        handleSizeChange(val) {
            this.searchModel.pageSize = val;
            this.getList(1);
        },
        // 修改页面
        handleCurrentChange(val) {
            this.loading = true;
            this.getList(val);
        },
        getList(pageNo) {
            var self = this;
            this.loading = true;
            if (pageNo != undefined) {
                this.searchModel.pageNo = pageNo;
            }
            let searchModel = _.cloneDeep(this.searchModel);
            aggSearchApiMonitor(this.compileSearchModel(searchModel))
                .then((data) => {
                    self.searchModel.pageNo = ++data.pageNo;
                    self.searchModel.count = data.count;
                    self.searchModel.pageSize = data.pageSize;
                    self.list = data.data;
                    self.loading = false;
                })
                .catch((err) => { });
        },
        // 重置查询条件
        reset() {
            this.searchModel = _.cloneDeep(defaultModel);
            this.getList(1);
        },
        // 查询
        search() {
            this.getList(1);
        },
        // 对searchModel进行处理
        compileSearchModel(searchModel) {
            searchModel.pageNo = searchModel.pageNo - 1;

            return searchModel;
        },
    },
};
</script>
  
<style lang="scss" scoped>
.operations {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
</style>
  